<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :auto="false" :safe-area-inset-bottom="false" :loading-more-enabled="false">
			<template #top>
				<view class="header">
					<view class="box">
						<view class="box-header">
							<uv-avatar-group :urls="urls" size="24" gap="0.4"></uv-avatar-group>
							<view class="box-header-title">
								{{ urls.length }}人已匹配方案
							</view>
						</view>
						<view class="box-body">
							<view class="box-body-left">
								<view class="box-body-left-icon">
									<image src="@/static/sui.png" mode="aspectFill"></image>
								</view>
								<view class="box-body-left-info">
									<view class="title">税票查询</view>
									<view class="tip">直接进行企业税票查询</view>
								</view>
							</view>
							<view class="box-body-right" @click="handleGoSearch">
								去查询
							</view>
						</view>
					</view>
					<view class="nav">
						<view class="nav-item">
							全部方案({{ dataList.length }})
						</view>
						<!-- <view class="nav-item">
							税票(0)
						</view> -->
					</view>
				</view>
			</template>
			<view class="list">
				<view class="list-item" v-for="i in dataList" :key="i.id" @click="handleDetail(i)">
					<view class="list-item-title">
						{{ i.business_name }}
					</view>
					<view class="list-item-time">
						匹配时间:{{ i.pipei_time }}
					</view>
					<view class="list-item-gird">
						<view class="list-item-gird-item">
							<view class="num">{{ i.count }}款</view>
							<view class="tip">可做产品</view>
						</view>
						<view class="list-item-gird-item">
							<view class="num">{{ i.max_money || '--'}}万</view>
							<view class="tip">最高可贷</view>
						</view>
						<view class="list-item-gird-item">
							<view class="num" style="color: #34C759;">{{ i.score }}</view>
							<view class="tip">综合评分</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		watchEffect,
		onMounted
	} from 'vue'
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getHttpApi
	} from '@/api/api.js'
	onMounted(async() => {
		await getMatchFinanceUser()
		await paging.value.reload()
	})
	const paging = ref(null);
	const dataList = ref([])
	const queryList = async (page, limit) => {
		try {
			let res = await getHttpApi({
				route: 'Newfinance.schemeAll',
				page,
				limit
			});
			paging.value.complete(res.data);
		} catch (e) {
			paging.value.complete(false);
		}
	}
	const urls = ref([])
	const handleGoSearch = ()=> {
		uni.navigateTo({
			url:'/pages/option/search'
		})
	}
	const handleDetail = (i)=> {
		uni.navigateTo({
			url:`/pages/option/details?id=${i.id}`
		})
	}
	const getMatchFinanceUser = async()=> {
		try{
			let res = await getHttpApi({
				route: 'Newfinance.matchFinanceUser',
				type: '3'
			});
			urls.value = res.data.avatar
		}catch(e){
			//TODO handle the exception
		}
	}
</script>
<style>
	page{
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.list{
		padding: 18rpx 26rpx;
		&-item{
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 20rpx 24rpx 30rpx;
			margin-bottom: 10rpx;
			&-title{
				font-weight: 400;
				font-size: 28rpx;
				color: #1D1D1D;
				line-height: 40rpx;
			}
			&-time{
				font-weight: 400;
				font-size: 24rpx;
				color: #979797;
				line-height: 40rpx;
			}
			&-gird{
				display: flex;
				gap: 150rpx;
				text-align: center;
				margin-top: 46rpx;
				.num{
					font-weight: 400;
					font-size: 30rpx;
					color: #3D3D3D;
					line-height: 40rpx;
				}
				.tip{
					font-weight: 400;
					font-size: 24rpx;
					color: #979797;
					line-height: 40rpx;
				}
			}
		}
	}
	.nav{
		display: flex;
		gap: 18rpx;
		margin-top: 38rpx;
		&-item{
			background: #F9F9F9;
			border-radius: 200rpx;
			padding: 10rpx 40rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #6F7283;
		}
	}
	image{
		width: 100%;
		height: 100%;
	}
	.header {
		padding: 22rpx;
		background: #FFFFFF;
	}

	.box {
		background: #1A64FF;
		border-radius: 10rpx;

		&-header {
			background: linear-gradient( 90deg, #3B7AFF 0%, rgba(59,122,255,0) 100%);
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			padding: 18rpx 28rpx 16rpx;
			&-title {
				font-weight: 400;
				font-size: 24rpx;
				color: #8EB2FC;
				margin-left: 6rpx;
			}
		}
		&-body{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 18rpx;
			&-left{
				display: flex;
				align-items: center;
				&-icon{
					width: 84rpx;
					height: 84rpx;
					border-radius: 100%;
					overflow: hidden;
					margin-right: 12rpx;
				}
				&-info{
					&>.title{
						font-weight: 400;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 40rpx;
					}
					&>.tip{
						font-weight: 400;
						font-size: 24rpx;
						color: #E8EFFF;
						line-height: 40rpx;
					}
				}
			}
			&-right{
				width: 112rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				background: #FFFFFF;
				border-radius: 200rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #1A64FF;
			}
		}
	}
</style>